import React, { useEffect, useState } from 'react';
import { Avatar, Card, Divider, List, Skeleton, Image } from 'antd';
import InfiniteScroll from 'react-infinite-scroll-component';
import { postImageList } from '@/services/home';
import './index.less'
interface DataType {
  gender: string;
  name: {
    title: string;
    first: string;
    last: string;
  };
  email: string;
  picture: {
    large: string;
    medium: string;
    thumbnail: string;
  };
  nat: string;
}

const App: React.FC = () => {
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState<DataType[]>([]);
  const [total, setTotal] = useState(0);
  const [current, setCurrent] = useState(1);
  const loadMoreData = async () => {
    if (loading) {
      return;
    }
    setLoading(true);
    setCurrent(current + 1)
    try {  
      const res = await postImageList({ pageSize: 6, current });  
      if (res.code === 200) {  
        setData([...data, ...res.data.records]);  
        setTotal(res.data.total);  
      }  
      console.log(res.data.records,current,total);
    } catch (error) {  
      console.error('Error loading more data:', error);  
    } finally {  
      setLoading(false);  
      
    }  
  };

  useEffect(() => {
    loadMoreData();
  }, []);

  return (
    <div
      className="scrollableDiv"
      style={{
        overflow: 'auto',
      }}
    >
      <InfiniteScroll
        dataLength={data.length}
        next={loadMoreData}
        hasMore={data.length < total}
        loader={<Skeleton avatar paragraph={{ rows: 1 }} active />}
        endMessage={<Divider plain>已展示全部</Divider>}
        scrollableTarget="scrollableDiv"
      >
        <List
          grid={{ column: 3 }}
          bordered={false}
          dataSource={data}
          renderItem={(item) => (
            <Card
              key={item?.id}
              style={{ marginBottom: 10, marginLeft: 10 }}
              cover={
                <Image src={`/api/${item?.netPath}`} />
              }>
              <Card.Meta title={item?.name} description="I Love Imooc" />
            </Card>
          )}
        />
      </InfiniteScroll>
    </div>
  );
};

export default App;